<template>
    <div class="detail-header">
        <div class="header-abs" v-show="showAbs">
            <router-link tag="span" class="icon-back iconfont" :to="'/'">
                &#xe63b;
            </router-link>
            <span>
              {{top}}
            </span>
        </div>
        
        <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            <router-link to="/" class="iconfont">&#xe63b;</router-link>
            <span>
              景点详情
          </span>
        </div>
    </div>
</template>

<script>
  
  export default {
    name: 'Header',
    data () {
      return {
        showAbs: true,
        opacityStyle: {opacity: 0},
        top:0,
      }
    }
    ,
    methods: {
      handleScroll () {
      //  console.log(1)
        // let top = window.document.body.scrollTop || window.document.documentElement.scrollTop
       let top = window.pageYOffset
        this.top = top

        // console.log(top)
        if (top > 60) {
          this.showAbs = false
          if (top < 242) {
            let opacity = top / 240
            opacity >= 0.98 ? 1 : opacity
            // console.log(opacity)
            this.opacityStyle = {
              opacity: opacity,
            }
          }
        } else {
          this.showAbs = true
        }
      },
    },
    mounted(){
      // window.addEventListener('scroll',this.handleScroll)

      window.document.body.addEventListener('touchmove', this.handleScroll)

    },
    destroyed(){
      window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>

<style scoped lang="stylus">
    @import "~assets/varibles.styl"
    
    .detail-header {
        .icon-back {
            position: absolute;
            top: 0.2rem;
            left: 0.2rem;
            z-index: 2;
            color: #fff;
            text-align: left;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: rgba(0, 0, 0, .6);
            padding: 0.2rem;
            font-size: 18px;
        }
        .header-fixed {
            overflow hidden;
            height: $headerHeight
            line-height: $headerHeight
            text-align: center;
            color: #fff;
            background-color: $bgcolor;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 2;
            .iconfont {
                float: left
                transform: translateX(5px)
                font-size: 0.5rem;
                color: #fff;
            }
            span {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%)
            }
        }
        
    }

</style>